<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

     <!-- 引入本地Bootstrap5的CSS -->
<link rel="stylesheet" href="http://115.159.88.63:9090/resources/bootstrap/dist/css/bootstrap.min.css"/>
<!-- 引入本地Bootstrap的图标 -->
<link rel="stylesheet" href="http://115.159.88.63:9090/resources/bootstrap-icons/font/bootstrap-icons.min.css"/>
<!-- 引入本地elementUi的CSS -->
<link rel="stylesheet" href="http://115.159.88.63:9090/resources/element-ui/lib/theme-chalk/index.css"/>

    <!-- <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css"> -->
    <link rel="stylesheet" href="./blog-sort.css">
</head>

<body>

    <div id="app">
        <!-- 引入头部组件 -->
        <!-- 引入头部组件 -->
        <header class="navbar bg-dark navbar-dark fixed-top navbar-expand-lg ">
            <!-- 版心部分
                container：指定两端留白版心
            -->
            <nav class="container">
                <!-- logo+个人名称
                    navbar-brand：导航栏中的一栏需要加的属性
                -->
                <a class="navbar-brand" href="http://localhost/pages/index/index.html">
                    <!-- height="40px"：指定图片高度为40px -->
                    <img height="40px" src="../../assets/images/itsource-w.png" alt="源码博客">
                </a>

                <!-- 折叠按钮
                    navbar-toggler：代表是导航栏中的折叠按钮
                    type="button"：默认button是submit，指定为按钮
                    data-bs-toggle="collapse"：用于触发折叠菜单的展开与折叠
                    data-bs-target="#navmenu"：指定折叠的目标，通过id选择器指定
                -->
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                    <!-- navbar-toggler-icon：指定折叠的图标 -->
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- 导航部分
                    collapse：指定一个折叠标签
                    navbar-collapse：代表导航栏中的折叠元素
                    justify-content-between：指定折叠元素的对齐方式
                    ms-5：指定外边距，距离左边5rem
                    id="navmenu"：用于折叠按钮寻找到此折叠元素
                -->
                <div class="collapse navbar-collapse justify-content-between ms-5" id="navmenu">
                    <!-- navbar-nav：指定导航栏中的导航 -->
                    <ul class="navbar-nav">
                        <!-- nav-item：指定导航元素 -->
                        <li class="nav-item">
                            <!-- nav-link：指定导航链接 -->
                            <a class="nav-link" href="http://localhost/pages/index/index.html"><i class="bi bi-house-door">首页</i></a>
                        </li>
                        <!-- nav-item：指定导航元素 -->
                        <li class="nav-item">
                            <!-- nav-link：指定导航链接 -->
                            <a class="nav-link" href="http://localhost/pages/blogarchives/blog-archives.html"><i
                                    class="bi bi-clock-fill">归档</i></a>
                        </li>
                        <!-- 此处使用的是下拉菜单
                            nav-item：指定导航元素
                            dropdown：指定下拉菜单
                        -->
                        <li class="nav-item dropdown">
                            <!-- nav-link：指定导航链接
                                dropdown-toggle，data-bs-toggle="dropdown"：指定此元素是下拉菜单标签
                                
                            -->
                            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                                <i class="bi bi-blockquote-right">文章分类</i>
                            </a>
                            <!-- dropdown-menu dropdown-menu-dark：指定下拉菜单内容并设置按钮颜色 -->
                            <ul class="dropdown-menu dropdown-menu-dark">
                                <li v-for="item in articleTypeCount"><a class="dropdown-item"
                                        :href="'http://localhost/pages/blogsort/blog-sort.html?articleTypeId='+item.articleTypeId+'&articleTypeName='+item.articleTypeName">{{item.articleTypeName}}</a>
                                </li>
                            </ul>
                        </li>
                        <!-- nav-item：指定导航元素 -->
                        <li class="nav-item">
                            <!-- nav-link：指定导航链接 -->
                            <a class="nav-link" href="http://localhost/pages/blogabout/blog-about.html"><i class="bi bi-person-lines-fill">关于我</i></a>
                        </li>
                    </ul>

                    <!-- 搜索按钮部分：使用的是按钮组
                        navbar-nav：指定导航栏中的导航
                    -->
                    <div class="navbar-nav">
                        <!-- 
                            input-group：指定按钮组
                            input-group-sm：指定按钮组大小
                        -->
                    </div>
                </div>


            </nav>
        </header>

        <section style="margin-top: 80px">
            <div class="container">
                <a href="#">
                    <img src="../../assets/images/see.jpg" width="100%" alt="" />
                </a>
            </div>
        </section>

        <section class="mt-3">
            <div class="container">
                <div class="card" style="background-color: white;">
                    <div class="card-body">
                        <div class="text-center">
                            <h2 class="my-3">{{articleTypeName}}</h2>
                            <div class="list-group list-group-numbered text-start list-group-flush fs-5">
                                <a v-for="item in articles" :href="'http://localhost/pages/blogdetail/blog-detail.html?articleId='+item.id" class="list-group-item text-info article"
                                    style="border: none;">{{item.articleName}}</a>
                            </div>
                        </div>
                        <hr class="my-4" />
                        <div>
                            <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                            d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
                            <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                                <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                                    但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                                </p>
                                <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 引入本地Bootstrap5的JS -->
<script src="http://115.159.88.63:9090/resources/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入本地vue.js -->
<script src="http://115.159.88.63:9090/resources/vue/dist/vue.min.js"></script>
<!-- 引入本地elementUi的JS -->
<script src="http://115.159.88.63:9090/resources/element-ui/lib/index.js"></script>
<!-- 引入本地的axios -->
<script src="http://115.159.88.63:9090/resources/axios/dist/axios.js"></script>


    <!-- <script src="../../node_modules/vue/dist/vue.min.js"></script>
    <script src="../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="../../node_modules/axios/dist/axios.min.js"></script> -->
    <script src="../../assets/js/common.js"></script>
    <script>
        // // 通过jQuery的加载事件引入头部组件到指定div，第一个参数是要引入的组件，第二个参数是引入之后要执行的函数
        // $(".header").load("../header/header.html", () => { })

        /* 必须要挂载分页栏才会起作用 */
        new Vue({
            el: "#app",
            data() {
                return {
                    articleTypeName: "",
                    articleTypeCount: [],
                    articles:[]
                };
            },
            methods: {
                getArticleTypeCount() {
                    this.$http.get("/tourist/article/articleTypeCountVo")
                        .then(res => {
                            // 对象的解构表达式
                            let { msg, data, success } = res.data;
                            if (success) {
                                this.articleTypeCount = data;
                            } else {
                                this.$message.error(msg);
                            }
                        })
                },
                //获取地址栏参数，key:参数名称
                getUrlParams(key) {
                    let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                    let r = window.location.search.substr(1)
                        .match(reg);
                    if (r != null)
                        return decodeURI(r[2]);
                    return null;
                },
                getArticleByArticleTypeId(articleTypeId) {
                    this.$http.get("/tourist/article/articleByArticleTypeId/"+articleTypeId)
                        .then(res => {
                            // 对象的解构表达式
                            let { msg, data, success } = res.data;
                            if (success) {
                                this.articles = data;
                            } else {
                                this.$message.error(msg);
                            }
                        })
                },
            },
            mounted() {
                this.getArticleTypeCount();
                this.getArticleByArticleTypeId(this.getUrlParams("articleTypeId"));
                this.articleTypeName = this.getUrlParams("articleTypeName");
            },
        })

    </script>


</body>

</html>